import React, {useState} from 'react'
import AudioPlayer from '../music/AudioPlayer'
import {useLocation} from 'react-router-dom'
import {useEffect} from 'react'

export default function MusicPlay() {
    console.log([ JSON.parse(localStorage.getItem('MUSIC'))])
    const  [playList,setplayList]=useState([])
    const location = useLocation()
    console.log(location)
    let Arr = []
    useEffect(()=>{
        if (location.state?.play!==undefined){
            const play = location.state.play
            Arr.push(play)
            setplayList(Arr)
        }
        else {
            setplayList([ JSON.parse(localStorage.getItem('MUSIC'))])
        }
        console.log(playList)
    },[])
    console.log(playList)

    return (
        <div className='MusicPlay'>
            <AudioPlayer tracks={[ JSON.parse(localStorage.getItem('MUSIC'))]}></AudioPlayer>
            <a href="/home" style={{margin:'10px 0 0 380px'}}>back</a>
        </div>
    )
}



